<template>
  <div>
    <div class="teacher-header">
      <span>教师列表</span><button @click="show = true">添加教师</button>
    </div>
    <div class="search-container">
      <input type="text" v-model="search" placeholder="输入用户名进行搜索" />
      <button @click="look_out">搜索</button>
      <button @click="all">显示全部教师</button>
    </div>
    <div id="box">
      <table>
        <thead>
          <tr>
            <th>用户名</th>
            <th>昵称</th>
            <th>生日</th>
            <th>性别</th>
            <th>教师类型</th>
            <th>电话</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in userList" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.nick }}</td>
            <td>{{ item.birthdata }}</td>
            <td>{{ item.sex ? "女" : "男" }}</td>
            <td>{{ item.teachertype | type() }}</td>
            <td>{{ item.iphone }}</td>
            <td>
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="details(item.id)"
              ></el-button
              ><el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="del(item.id)"
              ></el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页按钮 -->
    <div v-show="btn_show">
      <el-button type="primary" icon="el-icon-arrow-left" @click="last()"
        >上一页</el-button
      >
      <button
        class="btn"
        v-for="item in btn_num"
        :key="item"
        @click="change(item)"
        :class="{ active: activeIndex === item }"
      >
        {{ item }}
      </button>
      <el-button type="primary" @click="next()"
        >下一页<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </div>

    <!-- 搜索分页按钮 -->
    <div v-show="btn2_show">
      <el-button type="primary" icon="el-icon-arrow-left" @click="last2()"
        >上一页</el-button
      >
      <button
        class="btn"
        v-for="item in btn_num"
        :key="item"
        @click="change2(item)"
        :class="{ active: activeIndex === item }"
      >
        {{ item }}
      </button>
      <el-button type="primary" @click="next2()"
        >下一页<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
    </div>

    <el-alert
      v-if="showAlert"
      :title="alertMessage"
      type="info"
      show-icon
      class="custom-alert"
    />
    <!-- </el-button-group> -->
    <div class="add_teacher" v-show="show">
      <div>
        <i class="el-icon-close" @click="close()"></i><br />
        用户名<input type="text" v-model="name" /> 昵称<input
          type="text"
          v-model="nick"
        />
        生日<input type="date" v-model="birthdata" /><br /><br />
        性别<label
          ><input
            type="radio"
            name="user_sex"
            v-model="sex"
            value="0"
          />男</label
        ><label
          ><input
            type="radio"
            name="user_sex"
            v-model="sex"
            value="1"
          />女</label
        ><br />
        教师类型<label
          ><input
            type="radio"
            name="teacher_type"
            v-model="teachertype"
            value="1"
          />讲师</label
        ><label
          ><input
            type="radio"
            name="teacher_type"
            v-model="teachertype"
            value="2"
          />班主任</label
        >
        电话<input type="text" v-model="iphone" />
        <button @click="add">确定添加</button>
      </div>
    </div>
    <div class="delete" v-if="show_delete">
      <div>
        确定要删除吗？
        <div class="button-group">
          <button @click="dele()">确定删除</button>
          <button @click="show_delete = false">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import https from "@/utils/https";
export default {
  data() {
    return {
      userList: [],
      page: 1,
      pagelimit: 10,
      btn_num: 0,
      activeIndex: 1,
      show: false,
      name: "",
      nick: "",
      sex: 0,
      birthdata: "",
      teachertype: 1,
      iphone: "",
      showAlert: false,
      alertMessage: "",
      ID: "",
      show_delete: false,
      search: "",
      btn_show: true,
      btn2_show: false,
    };
  },
  mounted() {
    // https
    //   .test()
    //   .then((a) => {
    //     console.log(a);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
    this.apply1();
    this.apply();
  },
  methods: {
    //展示全部
    all() {
      this.btn2_show = false;
      this.btn_show = true;
      this.apply1();
      this.apply();
    },
    //渲染
    apply() {
      https
        .getUserList({
          page: this.page,
          pagelimit: this.pagelimit,
        })
        .then((a) => {
          this.userList = a.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //渲染按钮
    apply1() {
      https
        .getUserList({})
        .then((a) => {
          this.btn_num = Math.ceil(a.pagecount / this.pagelimit);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //点击分页
    change(i) {
      this.page = i;
      this.activeIndex = i;
      this.apply();
    },
    //搜索按钮点击分页
    change2(i) {
      this.page = i;
      this.activeIndex = i;
      this.look_out();
    },

    //上一页下一页
    next() {
      if (this.page < this.btn_num) {
        this.page++;
        this.activeIndex = this.page;
        this.apply();
      } else {
        this.showAlert = true;
        this.alertMessage = "这已经是最后一页了";
        setTimeout(() => {
          this.showAlert = false;
        }, 2000);
      }
    },
    last() {
      if (this.page > 1) {
        this.page--;
        this.activeIndex = this.page;
        this.apply();
      } else {
        this.showAlert = true;
        this.alertMessage = "这已经是第一页了";
        setTimeout(() => {
          this.showAlert = false;
        }, 2000);
      }
    },
    //搜索上一页下一页
    next2() {
      if (this.page < this.btn_num) {
        this.page++;
        this.activeIndex = this.page;
        this.look_out();
      } else {
        this.showAlert = true;
        this.alertMessage = "这已经是最后一页了";
        setTimeout(() => {
          this.showAlert = false;
        }, 2000);
      }
    },
    last2() {
      if (this.page > 1) {
        this.page--;
        this.activeIndex = this.page;
        this.look_out();
      } else {
        this.showAlert = true;
        this.alertMessage = "这已经是第一页了";
        setTimeout(() => {
          this.showAlert = false;
        }, 2000);
      }
    },
    //关闭添加框
    close() {
      this.show = false;
      this.name = "";
      this.nick = "";
      this.sex = 0;
      this.teachertype = 1;
      this.iphone = "";
    },
    //添加
    add() {
      https
        .addUserList({
          name: this.name,
          nick: this.nick,
          sex: this.sex,
          birthdata: this.birthdata,
          iphone: this.iphone,
          teachertype: this.teachertype,
        })
        .then((a) => {
          this.apply();
          this.show = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //详情
    details(id) {
      this.$router.push({
        path: "/about",
        query: {
          id: id,
        },
      });
    },
    //删除
    del(id) {
      this.ID = id;
      this.show_delete = true;
    },
    dele() {
      https
        .delUserList({ id: this.ID })
        .then((a) => {
          this.apply();
          this.show_delete = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //搜索
    look_out() {
      this.btn_show = false;
      this.btn2_show = true;
      https
        .lookoutUserList({
          name: this.search,
          page: this.page,
          pagelimit: this.pagelimit,
        })
        .then((a) => {
          this.btn_num = Math.ceil(a.pagecount / this.pagelimit);
          this.userList = a.data;
          this.activeIndex = this.page;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  filters: {
    type(a) {
      if (a == 1) {
        return "讲师";
      } else if (a == 2) {
        return "班主任";
      }
    },
  },
};
</script>
<style lang='less' scoped>
#box {
  height: 700px;
}
.teacher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8fafc;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
  span {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    letter-spacing: 0.5px;
  }
  button {
    padding: 8px 16px;
    background-color: #4299e1;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  button:hover {
    background-color: #3182ce;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  button:active {
    transform: translateY(0);
  }
  button::before {
    content: "+";
    font-size: 1.2rem;
  }
}
.btn {
  padding: 8px 16px;
  margin: 0 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}
.btn:hover {
  background-color: #f5f5f5;
}

.btn.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}
// 变量定义
@primary-color: #409eff;
@border-color: #e0e0e0;
@even-row-bg: #f8f9fa;
@hover-bg: #ebf5ff;
@text-color: #333;
@shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

@modal-bg: #fff;
@modal-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
@primary-color: #409eff;
@input-height: 36px;
@padding: 20px;
@radius: 6px;

@dialog-bg: #ffffff;
@delete-primary-color: #ff4d4f; // 红色作为主色调
@text-color: #333333;
@delete-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@delete-radius: 8px;
@delete-padding: 24px;
@button-height: 36px;

@search-primary-color: #409eff;
@search-border-color: #dcdfe6;
@hover-color: #ecf5ff;
@search-text-color: #606266;
@search-radius: 4px;
@transition: all 0.3s ease;

// 基础表格样式
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: "Arial", sans-serif;
  box-shadow: @shadow;
  overflow: hidden;
  border-radius: 8px;

  // 表头样式
  thead {
    background-color: @search-primary-color;
    color: white;

    th {
      padding: 12px 15px;
      text-align: left;
      font-weight: 600;
      text-transform: capitalize;
      position: relative;
    }
  }

  // 表格行样式
  tbody tr {
    border-bottom: 1px solid @search-border-color;
    transition: all 0.3s ease;

    &:nth-child(even) {
      background-color: @even-row-bg;
    }

    &:last-child {
      border-bottom: 2px solid @search-primary-color;
    }

    &:hover {
      background-color: @hover-bg;
      transform: translateX(2px);
    }
  }

  // 表格单元格样式
  td {
    padding: 12px 15px;
    color: @text-color;
    vertical-align: middle;

    // 修正HTML中的拼写错误对应的样式
    &[data-label="电话"] {
      font-family: monospace; // 电话号码使用等宽字体
    }

    // 性别特定样式
    &[data-label="性别"] {
      text-transform: capitalize;
    }

    // 生日特定样式
    &[data-label="生日"] {
      white-space: nowrap;
    }
  }
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: @search-radius;

  // 搜索输入框
  input[type="text"] {
    width: 300px;
    height: 36px;
    padding: 0 15px;
    border: 1px solid @search-border-color;
    border-radius: @search-radius 0 0 @search-radius;
    transition: @transition;

    &:focus {
      border-color: @search-primary-color;
      outline: none;
      box-shadow: 0 0 0 2px fade(@search-primary-color, 20%);
    }
  }

  // 搜索按钮
  button:first-of-type {
    height: 36px;
    padding: 0 20px;
    background-color: @search-primary-color;
    color: white;
    border: none;
    border-radius: 0 @search-radius @search-radius 0;
    cursor: pointer;
    transition: @transition;

    &:hover {
      background-color: darken(@search-primary-color, 10%);
    }

    &:active {
      transform: scale(0.98);
    }
  }

  // 显示全部按钮
  button:last-of-type {
    height: 36px;
    margin-left: 10px;
    padding: 0 20px;
    background-color: white;
    color: @search-text-color;
    border: 1px solid @search-border-color;
    border-radius: @search-radius;
    cursor: pointer;
    transition: @transition;

    &:hover {
      color: @search-primary-color;
      border-color: @search-primary-color;
    }

    &:active {
      transform: scale(0.98);
    }
  }
}

// 响应式设计 - 在小屏幕上显示为块状布局
@media screen and (max-width: 768px) {
  table {
    border: 0;
    box-shadow: none;

    thead {
      display: none;
    }

    tr {
      display: block;
      margin-bottom: 15px;
      border-bottom: 2px solid @primary-color;
      border-radius: 4px;
      box-shadow: @shadow;
    }

    td {
      display: block;
      text-align: right;
      padding-left: 50%;
      position: relative;
      border-bottom: 1px dotted #ddd;

      &:before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        font-weight: bold;
        text-align: left;
        color: @primary-color;
      }

      &:last-child {
        border-bottom: 0;
      }
    }
  }
}
.add_teacher {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  // 表单容器
  div {
    background-color: @modal-bg;
    border-radius: @radius;
    box-shadow: @modal-shadow;
    width: 480px;
    padding: @padding;
    animation: modalFadeIn 0.3s ease-out;

    // 表单元素通用样式
    input[type="text"] {
      display: block;
      width: 90%;
      height: @input-height;
      line-height: @input-height;
      padding: 0 12px;
      margin-bottom: 16px;
      border: 1px solid @border-color;
      border-radius: 4px;
      transition: border-color 0.3s;

      &:focus {
        border-color: @primary-color;
        outline: none;
      }
    }

    // 标签样式
    label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      color: #606266;
    }

    // 按钮样式
    .el-icon-close {
      position: relative;
      top: -15px;
      left: 470px;
      font-size: 18px;
      color: #999;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 1;
    }

    .el-icon-close:hover {
      color: #333;
      transform: scale(1.2);
    }

    .el-icon-close:active {
      transform: scale(0.9);
    }
    button:last-child {
      display: block;
      width: 100%;
      height: @input-height;
      background-color: @primary-color;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.3s;

      &:hover {
        background-color: lighten(@primary-color, 5%);
      }

      &:active {
        background-color: darken(@primary-color, 5%);
      }
    }
  }
}
.custom-alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  z-index: 2000;
  animation: fadeIn 0.5s;

  // 自定义动画
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translate(-50%, -20px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
}
// 变量定义
@dialog-bg: #ffffff;
@delete-primary-color: #ff4d4f; // 红色作为主色调
@delete-border-color: #e8e8e8;
@text-color: #333333;
@delete-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@delete-radius: 8px;
@delete-padding: 24px;
@button-height: 36px;

// 遮罩层
.delete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  // 对话框内容
  > div {
    background-color: @dialog-bg;
    border-radius: @delete-radius;
    box-shadow: @delete-shadow;
    width: 380px;
    padding: @delete-padding;
    text-align: center;
    animation: fadeInUp 0.3s ease-out;

    // 提示文字
    &::before {
      content: "⚠️";
      font-size: 24px;
      display: block;
      margin-bottom: 16px;
    }

    // 按钮容器
    .button-group {
      display: flex;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;
    }

    // 按钮基础样式
    button {
      height: @button-height;
      padding: 0 20px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
    }

    // 确定删除按钮
    button:first-child {
      background-color: @delete-primary-color;
      color: white;
      border: none;

      &:hover {
        background-color: darken(@delete-primary-color, 10%);
        transform: translateY(-2px);
      }

      &:active {
        transform: translateY(0);
      }
    }

    // 取消按钮
    button:last-child {
      background-color: transparent;
      color: @text-color;
      border: 1px solid @delete-border-color;

      &:hover {
        background-color: #f5f5f5;
        border-color: darken(@delete-border-color, 10%);
      }
    }
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>